<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 68 52"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1.204"
          y1="0.5"
          x2="0.064"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" stop-opacity="0.902" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0.2" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="0.854"
          y1="0.5"
          x2="0.252"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0.2" />
        </linearGradient>
      </defs>
      <g id="装饰6" transform="translate(-539.076 -371.232)">
        <g id="组_5040" data-name="组 5040">
          <path
            id="联合_1"
            data-name="联合 1"
            d="M19891,22643.791l21.344-20.795-21.344-20.8,5.322-5.193,26.678,26-26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient)"
          />
          <path
            id="联合_2"
            data-name="联合 2"
            d="M19896.322,22647.6l25.242-24.6-25.244-24.6-3.891,3.8,21.346,20.8-.736.717-20.609,20.08,3.893,3.807m0,1.4-5.322-5.207,21.344-20.795-21.344-20.8,5.322-5.193,26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient-2)"
          />
        </g>
        <g
          id="组_5041"
          data-name="组 5041"
          transform="translate(18)"
          opacity="0.6"
        >
          <path
            id="联合_1-2"
            data-name="联合 1"
            d="M19891,22643.791l21.344-20.795-21.344-20.8,5.322-5.193,26.678,26-26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient)"
          />
          <path
            id="联合_2-2"
            data-name="联合 2"
            d="M19896.322,22647.6l25.242-24.6-25.244-24.6-3.891,3.8,21.346,20.8-.736.717-20.609,20.08,3.893,3.807m0,1.4-5.322-5.207,21.344-20.795-21.344-20.8,5.322-5.193,26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient-2)"
          />
        </g>
        <g
          id="组_5042"
          data-name="组 5042"
          transform="translate(36)"
          opacity="0.2"
        >
          <path
            id="联合_1-3"
            data-name="联合 1"
            d="M19891,22643.791l21.344-20.795-21.344-20.8,5.322-5.193,26.678,26-26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient)"
          />
          <path
            id="联合_2-3"
            data-name="联合 2"
            d="M19896.322,22647.6l25.242-24.6-25.244-24.6-3.891,3.8,21.346,20.8-.736.717-20.609,20.08,3.893,3.807m0,1.4-5.322-5.207,21.344-20.795-21.344-20.8,5.322-5.193,26.678,26Z"
            transform="translate(-19351.922 -22225.766)"
            fill="url(#linear-gradient-2)"
          />
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
